<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="wap-font-scale" content="no">
    <meta content="telephone=no" name="format-detection">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>商品-我的优惠券</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../css/swiper.min.css">
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/app.css?a=1111"/>
</head>
<body class="isHide">
<div class="ft-wrap height top-big">
    <!--顶部悬浮导航-->
    <div class="ft-head-nav">
        <a class="ft-h-back" href="javascript:;">返回</a>
        <span class="ft-head-text">My Coupons </span>
    </div>
    <!--顶部浮动切换卡-->
    <div class="ft-head-tab fixed no-top box-list">
        <ul class="row-3">
            <li class="active">
                <a href="javascript:;">
                    <span>All</span>
                    <i>(16)</i>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <span>Waiting payment</span>
                    <i>(13)</i>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <span>Waiting shipping</span>
                    <i>(3)</i>
                </a>
            </li>
        </ul>
    </div>
    <!--中间滚动内容-->
    <div class="ft-container no-padding height">
        <div class="ft-overflow">
            <div class="coupon-none" style="display: none;">
                <label class="ft-img-box"><img src="../img/coupons-none.png"></label>
                <span>No data</span>
            </div>
            <div class="ft-module no-mar no-border coupon-list-module">
                <div class="module-bd">
                    <div class="coupon-bar">
                        <ul class="pop-coupons-bd">
                            <li>
                                <div class="coupons-item clearfix">
                                    <div class="coupon-intro active">
                                        <div class="coupon-bg">
                                            <span><i>$500000000.00</i> Coupons</span>
                                            <span>Orders over <i>$ 0.00</i></span>
                                        </div>
                                    </div>

                                    <div class="coupon-date clearfix">
                                        <div class="coupon-time t-ellipsis active">Expire on: Mar 23 2017</div>
                                        <div class="coupon-tips active">BSKADFH</div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="coupons-item clearfix">
                                    <div class="coupon-intro active">
                                        <div class="coupon-bg">
                                            <span><i>$50.00</i> Coupons</span>
                                            <span>Orders over <i>$ 5890.00</i></span>
                                        </div>
                                    </div>

                                    <div class="coupon-date clearfix">
                                        <div class="coupon-time t-ellipsis active">Expire on: Mar 23 2017</div>
                                        <div class="coupon-tips active">BSKADFH</div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="coupons-item clearfix">
                                    <div class="coupon-intro active">
                                        <div class="coupon-bg">
                                            <span><i>$500000000.00</i> Coupons</span>
                                            <span>Orders over <i>$ 0.00</i></span>
                                        </div>
                                    </div>

                                    <div class="coupon-date clearfix">
                                        <div class="coupon-time t-ellipsis active">Expire on: Mar 23 2017</div>
                                        <div class="coupon-tips active">BSKADFH</div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="coupons-item clearfix">
                                    <div class="coupon-intro active">
                                        <div class="coupon-bg">
                                            <span><i>$50.00</i> Coupons</span>
                                            <span>Orders over <i>$ 5890.00</i></span>
                                        </div>
                                    </div>

                                    <div class="coupon-date clearfix">
                                        <div class="coupon-time t-ellipsis active">Expire on: Mar 23 2017</div>
                                        <div class="coupon-tips active">BSKADFH</div>
                                    </div>
                                </div>
                            </li>
                            <li class="specail-li">
                                <div class="order-infor-tips">
                                    <span class="none-more-tips">已失效的券</span>
                                </div>
                            </li>
                            <li>
                                <div class="coupons-item clearfix">
                                    <div class="coupon-intro">
                                        <div class="coupon-bg">
                                            <span><i>$500000000.00</i> Coupons</span>
                                            <span>Orders over <i>$ 0.00</i></span>
                                        </div>
                                    </div>

                                    <div class="coupon-date clearfix">
                                        <div class="coupon-time t-ellipsis">Expire on: Mar 23 2017</div>
                                        <div class="coupon-tips">BSKADFH</div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="coupons-item clearfix">
                                    <div class="coupon-intro">
                                        <div class="coupon-bg">
                                            <span><i>$50.00</i> Coupons</span>
                                            <span>Orders over <i>$ 5890.00</i></span>
                                        </div>
                                    </div>

                                    <div class="coupon-date clearfix">
                                        <div class="coupon-time t-ellipsis">Expire on: Mar 23 2017</div>
                                        <div class="coupon-tips">BSKADFH</div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="coupons-item clearfix">
                                    <div class="coupon-intro">
                                        <div class="coupon-bg">
                                            <span><i>$500000000.00</i> Coupons</span>
                                            <span>Orders over <i>$ 0.00</i></span>
                                        </div>
                                    </div>

                                    <div class="coupon-date clearfix">
                                        <div class="coupon-time t-ellipsis">Expire on: Mar 23 2017</div>
                                        <div class="coupon-tips">BSKADFH</div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="coupons-item clearfix">
                                    <div class="coupon-intro">
                                        <div class="coupon-bg">
                                            <span><i>$50.00</i> Coupons</span>
                                            <span>Orders over <i>$ 5890.00</i></span>
                                        </div>
                                    </div>

                                    <div class="coupon-date clearfix">
                                        <div class="coupon-time t-ellipsis">Expire on: Mar 23 2017</div>
                                        <div class="coupon-tips">BSKADFH</div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/box.js"></script>
<script src="../js/ft-common.js"></script>
<script src="../js/pageScript.js"></script>
<script>
    $(function () {
        $(".ft-head-tab li").click(function () {
            var that = this;
            if ($(that).hasClass("active")) return false;
            $(that).addClass("active").siblings().removeClass("active");
            $.jAlert.loading("Loading...", null, {
                animate: "j-alert-normal",
                iconType: "H",
                isFull: true
            });
            setTimeout(function () {
                //模拟显示数据
                if ($(that).index() == 2) {
                    $(".coupon-none").show();
                    $(".coupon-list-module").hide();
                } else {
                    $(".coupon-none").hide();
                    $(".coupon-list-module").show();
                }
                $.jClose({
                    type: 2, callback: function () {
                    }
                });
            }, 300);
        });
    })
</script>
</body>
</html>